<template>
	<up-card padding='0rpx' :foot-border-top="false" :head-border-bottom='false' style="background-color: #f6f8fa;">
		<template #body>
			<view class="" slot="body">
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0" style="position: relative;">
					<image :src="imgs" mode="aspectFill" style="width: 300rpx;height: 300rpx;"></image>
					<view>
						<view>{{teamInfo.teamName}}</view>
						<view>{{teamInfo.description}}</view>
						<up-tag plain size="mini" type="warning" style="margin: 8rpx;margin-left: 0rpx;">
							{{ teamStatusEnum[teamInfo.teamState] }}
						</up-tag>
						<view>{{ `队伍人数: ${teamInfo.hasJoinNum}/${teamInfo.maxNum}` }}</view>
						<view v-if="teamInfo.expireTime"> {{ '过期时间:' + teamInfo.expireTime }}</view>
						<view> {{ '创建时间:' + teamInfo.createTime }}</view>
					</view>
				</view>
			</view>
		</template>
	</up-card>
	<!-- 分割线 -->
	<up-divider lineColor="#1989fa" class="divi der-custom"  text="队伍用户" textPosition="left" />
	<UserCardList :user-list="teamInfo.userJoinList" :loading="loading" />
</template>

<script setup lang="ts">
	import { teamStatusEnum } from '@/constants/team'
	import UserCardList from "@/components/UserCardList.vue";
	import imgs from '@/static/vue.svg'
	import myAxios from '@/plugins/myAxios'
	import type { userType } from '@/models/user'
	import { ref } from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const loading = ref(false)
	const teamInfo = ref('')
		// const teamInfo = ref({
		// 	teamName: '假数据队伍',
		// 	description: '这是一个测试用的队伍描述',
		// 	teamState: 1,
		// 	hasJoinNum: 5,
		// 	maxNum: 10,
		// 	expireTime: '2025-01-31',
		// 	createTime: '2025-01-01',
		// 	userJoinList: [
		// 		{ name: '用户1', id: 1 },
		// 		{ name: '用户2', id: 2 },
		// 		{ name: '用户3', id: 3 },
		// 		{ name: '用户4', id: 4 },
		// 		{ name: '用户5', id: 5 },
		// 	]
		// })
	const teamId = ref<number | null>(null)

	/**
	 * 加载队伍信息
	 */
	const loadTeamInfo = async () => {
		try {
			const res = await myAxios.get('/team/get', {
				params: {
					id: teamId.value
				}
			})
			if (res?.code === 0 && res) {
				console.log(res)
				teamInfo.value = res.data
			} else {
				uni.showToast({
					title: '获取队伍信息失败' + (res.description ? `,${res.description}` : ''),
					icon: 'none'
				})
			}
		} catch (error) {
			uni.showToast({
				title: '获取队伍信息失败',
				icon: 'none'
			})
		}
	}

	/**
	 * 下拉刷新
	 */
	const onRefresh = () => {
		setTimeout(() => {
			loading.value = false
		}, 1000)
	}

	/**
	 * 页面生命周期方法
	 */
	onLoad((options) => {
		teamId.value = Number(options.id)
		loadTeamInfo()
	})
</script>

<style>

</style>